import React, { Fragment } from 'react';
import { ColumnsType } from 'antd/es/table';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card, Space, Button, Table } from 'antd';

import MRPSearch from './MRPSearch';
import MrpUpdate from './MrpUpdate';
import { momentAll } from '@/utils/utils';

interface User {
  key: number;
  contractNum: string;
  orderNum:string;  
  productId:string;  
  needNum:string;  
  needDate:string;  
  stockNum:string;  
  location:string;  
  purchaseOrder:string;  
  qualityOrder:string;  
  unquality:string;  
  quality:string;  
  qitao:string;  

}
class ViewPage extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      visibel: false,
      editStatus: false,
      formVals: {},
      list:[]
    };
  }
  componentDidMount(){
    this.query()
  }
  query = () => {
    //list 接口
    
   this.setState({
    list: [
      {
        contractNum: 'QMX2021062801',
        orderNum: '2021001',
        productId: '001023',
        needNum: '12',
        needDate: '2021-06-29',
        stockNum: '19',
        location: '19',
        purchaseOrder: '19',
        qualityOrder: '19',
        unquality: '1',
        quality: '18',
        qitao: '是',
      },
    ]
   })
  };
  handleSearch = (values: any) => {
    this.setState(
      {
        params: { ...values },
        pageNumber: 1,
      },
      this.query,
    );
  };

  /**
   * 控制新增，编辑事件
   */
  handleSubmit = async (values: any) => {
    const { editStatus } = this.state;
    // const { dispatch } = this.props;
    if (editStatus) {
      // await dispatch({
      //   type: '#/edit',
      //   payload,
      // });
    } else {
      // await dispatch({
      //   type: '#/add',
      //   payload,
      // });
    }
    this.switchVisible();
    this.query();
  };

  /**
   * 控制更新模态框显示
   * @param {boolean} visible 是否显示
   * @param {object} formVals 模态框默认值
   * @param {boolean} editStatus 是否编辑模式
   */
  switchVisible = (visible = false, formVals = {}, editStatus = false) => {
    let newFormVals = {};
    if (formVals) {
      for (let key in formVals) {
        newFormVals[key.toLocaleLowerCase()] = formVals[key];
      }
      newFormVals = momentAll(newFormVals);
    }
    this.setState({
      visible,
      formVals: newFormVals,
      editStatus,
    });
  };
  render() {
    const columns: ColumnsType<User>= [
      {
        title: '序号',
        key: 'index',
        render: (_: any, __: any, i: any) => i + 1,
      },
      {
        title: '合同号',
        dataIndex: 'contractNum',
      },
      {
        title: '订单号',
        dataIndex: 'orderNum',
      },
      {
        title: '产品编码',
        dataIndex: 'productId',
      },
      {
        title: '需求量',
        dataIndex: 'needNum',
      },
      {
        title: '需求日期',
        dataIndex: 'needDate',
      },
      {
        title: '现存量',
        dataIndex: 'stockNum',
      },
      {
        title: '库位',
        dataIndex: 'location',
      },
      {
        title: '采购单',
        dataIndex: 'purchaseOrder',
      },
      {
        title: '质检单',
        dataIndex: 'qualityOrder',
      },
      {
        title: '不合格数',
        dataIndex: 'unquality',
      },
      {
        title: '合格数量',
        dataIndex: 'quality',
      },
      {
        title: '是否齐套',
        dataIndex: 'qitao',
      },
    ];
    const { visible, formVals, editStatus,list } = this.state;
    return (
      <PageHeaderWrapper title={false}>
        <Card title="物料需求计划">
          <MRPSearch onSearch={this.handleSearch}>
          </MRPSearch>
          <Table
            rowKey="productId"
            columns={columns}
            dataSource={list}
            scroll={{ x: 'max-content' }}
          />
        </Card>
        <MrpUpdate
          visible={visible}
          eidtStatue={editStatus}
          formVals={formVals}
          onCancel={this.switchVisible}
          onSubmit={this.handleSubmit}
        />
      </PageHeaderWrapper>
    );
  }
}
export default ViewPage;
